<!-- 合同模板 -->
<template>
  <div class="index">
    <pageHeader
      :title="title"
      :breadCrumb="breadCrumb"
      :show-back="true"
    ></pageHeader>
    <div class="content">
      <div class="operater">
        <a-button type="primary" @click="goContractAddSales()"
          >新建销售类合同模板</a-button
        >
        <a-button type="primary" @click="goContractAddBuy()"
          >新建采购类合同模板</a-button
        >
      </div>
      <div class="model-title">销售类合同</div>
      <div v-for="(outerItem, outerIndex) in saleList.list" :key="outerIndex">
        <div class="title"> {{ outerItem.name }} </div>
        <div class="cards">
          <DemandCard
            ref="demandCardRef"
            v-for="(innerItem, innerIndex) in outerItem.contractTemplate"
            :key="innerIndex"
            :form="innerItem"
            @del="del(innerItem.id, outerIndex, innerIndex, 'sale')"
            @statusChange="statusChange"
            @goDemandCreate="goContractAddSales"
          ></DemandCard>
        </div>
      </div>

      <div class="model-title">采购类合同</div>
      <div v-for="(outerItem, outerIndex) in buyList.list" :key="outerIndex">
        <div class="title"> {{ outerItem.name }} </div>
        <div class="cards">
          <DemandCard
            v-for="(innerItem, innerIndex) in outerItem.contractTemplate"
            :key="innerIndex"
            :form="innerItem"
            @del="del(innerItem.id, outerIndex, innerIndex, 'buy')"
            @statusChange="statusChange"
            @goDemandCreate="goContractAddBuy"
          ></DemandCard>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted, inject } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    GetContractTemplate,
    DeleteContractTemplate,
    PutContractTemplateStatusOpen,
  } from '@/api/contract-management/base-setting/template-contract/index';
  import dayjs from 'dayjs';

  const router = useRouter();
  const demandCardRef = ref();

  const title: string = '合同模板';
  const breadCrumb: string[] = ['订单管理', '基础设置', '合同模板'];

  const saleList = reactive<any>({
    list: [],
  });
  const buyList = reactive<any>({
    list: [],
  });

  const getData = async () => {
    try {
      const res = await GetContractTemplate();
      saleList.list = res.contractFrom;
      buyList.list = res.contractType;
    } catch (error: unknown) {
      console.log(error);
    }
  };
  getData();

  //多个需求模板状态，只能有一个是开启状态
  const statusChange = async (info: any) => {
    try {
      await PutContractTemplateStatusOpen({
        id: info.id,
      });
      getData();
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const goContractAddSales = (params = {}) => {
    router.push({
      name: 'ContractTemplateAddSales',
      query: params,
    });
  };
  const goContractAddBuy = (params = {}) => {
    router.push({
      name: 'ContractTemplateAddBuys',
      query: params,
    });
  };

  // const getContractTemplate = async () => {
  //   const res = await GetContractTemplate();
  // };
  // getContractTemplate();
  const reload = inject('reload');

  const del = async (
    id: number,
    outerindex: number,
    innerIndex: number,
    type: string
  ) => {
    let params = { id };
    if (type === 'sale') {
      await DeleteContractTemplate(params);
      saleList.list[outerindex].contractTemplate.splice(innerIndex, 1);
    } else {
      await DeleteContractTemplate(params);
      buyList.list[outerindex].contractTemplate.splice(innerIndex, 1);
    }
  };
</script>

<style scoped lang="less">
  .index {
    .content {
      padding: 16px;
    }
    .operater {
      margin: 24px 0;
      display: flex;
      justify-content: space-around;
    }
    .model-title {
      background: rgba(242, 246, 252, 1);
      padding: 16px 24px;
      font-size: 16px;
    }
    .title {
      height: 30px;
      background-color: #fff;
    }
    .title::before {
      position: relative;
      display: inline-block;
      width: 5px;
      height: 20px;
      content: '';
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      background-color: #165dff;
      margin-right: 10px;
    }
    .cards {
      padding: 16px 24px;
      display: flex;
      flex-wrap: wrap;
    }
  }
</style>
